<template>
  <div class="pad-20 bgc-default">
    <div class="pad-20 bg-color-white">
      <!--顶部搜索 -->
      <div class="top-operate-default mar-t-20">
        <div class="search-item">
          <label class="font-14">商品搜索：</label>
          <el-select class="select-class" v-model="textCol" style="width: 120px">
            <el-option label="商品名称" value="title"></el-option>
            <el-option label="商品货号" value="goodsCode"></el-option>
            <el-option label="商品条码" value="goodsBarCode"></el-option>
            <el-option label="外部编码" value="externalCode"></el-option>
            <el-option label="sku外部编码" value="skuExternalCode"></el-option>
          </el-select>
          <el-input @keyup.enter.native="handleSearch" v-model.trim="searchKeyword" placeholder="请输入关键词"></el-input>
          <label class="font-14 pad-l-5">商品品牌：</label>
          <el-select class="select-class" v-model="brandId" style="width: 120px">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="item in listBrands" :key="item.brandId" :label="item.brandName" :value="item.brandId">
            </el-option>
          </el-select>
          <label class="font-14 mar-l-20">商品分类：</label>
          <el-cascader v-model="categoryIds" :props="{ checkStrictly: true }" change-on-select placeholder="选择商品分类"
            :options="categoryData" class="special-input" clearable></el-cascader>
          <label class="font-14 mar-l-20">商品来源：</label>
          <el-select v-model="supplierType" style="width: 120px">
            <el-option label="全部" value=""></el-option>
            <el-option label="总部自营" value="1"></el-option>
            <el-option label="供货联盟" value="3"></el-option>
            <el-option label="淘宝联盟" value="2"></el-option>
            <el-option v-for="(item, index) in supplierList" :key="index" :label="item.supplierName"
              :value="item.supplierId"></el-option>
          </el-select>
          <el-button-group class="mar-l-20">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button plain @click="resetSearch">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <!--商品状态 -->
      <div class="tabs-box mar-t-20">
        <el-tabs type="card" v-model="pagingStatus" @tab-click="goodsStatusClick">
          <el-tab-pane label="全部" name="0"></el-tab-pane>
          <el-tab-pane label="上架中" name="1"></el-tab-pane>
          <el-tab-pane label="已售空" name="2"></el-tab-pane>
          <el-tab-pane label="仓库中" name="3"></el-tab-pane>
        </el-tabs>
      </div>

      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="goodsList" v-loading="listLoading" element-loading-text="加载中">
          <el-table-column width="320px" label="商品" fixed="left">
            <template slot-scope="scope">
              <div class="flex v-align-c mar-r-30">
                <label><img :src="scope.row.mainImage" class="t-goods-pic"></label>
                <div class="font-14 pad-l-10 v-align-h height-65">
                  <div class="goods-title">
                    <div class="line-2">
                      <template v-if="scope.row.categoryName">
                        <el-tag size="mini" v-if="scope.row.skuFlag == 1" type="danger" effect="light">多</el-tag>
                      </template>
                      <template
                        v-if="enterpriseConfig.anchorSelectionAuthority == '1' && scope.row.selectionGoodsType == '1'">
                        <el-tag size="mini" class="anchor-tag" type="danger" effect="light">选</el-tag>
                      </template>
                      {{scope.row.title}}
                    </div>
                  </div>
                  <template v-if="scope.row.categoryName">
                    <span class="font-color-6 font-13">[{{scope.row.categoryName}}]</span>
                  </template>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="180px" label="来源">
            <template slot-scope="scope">
              <span v-if="scope.row.goodsSource == 0">总部自营</span>
              <span v-if="scope.row.goodsSource == 1">{{scope.row.supplierName}}</span>
              <span v-if="scope.row.goodsSource == 2">淘宝联盟</span>
              <span v-if="scope.row.goodsSource == 3">供货联盟</span>
            </template>
          </el-table-column>
          <el-table-column width="140px" label="商品品牌" prop="brandName"></el-table-column>
          <el-table-column width="150px" label="供应价" v-if="!this.getMemberId()">
            <template slot-scope="scope">
              <template v-if="scope.row.goodsSource == 3">
                <span v-if="scope.row.supplyAlliancePrice">
                  <span> ￥{{scope.row.supplyAlliancePrice}} </span>
                  <span
                    v-if="scope.row.supplyAllianceMaxPrice !== null && scope.row.supplyAlliancePrice  !== scope.row.supplyAllianceMaxPrice">--￥{{scope.row.supplyAllianceMaxPrice}}
                  </span>
                </span>
                <span v-else>--</span>
              </template>
              <template v-else>
                <template v-if="scope.row.supplyPrice">
                  <span v-if="scope.row.supplyPrice">￥{{scope.row.supplyPrice}}</span>
                </template>
              </template>
            </template>
          </el-table-column>
          <el-table-column v-if="this.getMemberId()" width="140px" label="分销价">
            <template slot-scope="scope">
              ￥{{scope.row.distributePrice}}
            </template>
          </el-table-column>
          <el-table-column v-if="getVersionType() != 2 && getVersionType() != 3" width="140px" label="零售价">
            <template slot-scope="scope">
              ￥{{scope.row.sellPrice}}
            </template>
          </el-table-column>
          <el-table-column v-if="getVersionType() == 1" width="140px" label="分销佣金">
            <template slot-scope="scope">
              ￥{{scope.row.distributeIncome}}
            </template>
          </el-table-column>

          <el-table-column width="140px" label="库存">
            <template slot-scope="scope">

              <template v-if="scope.row.goodsSource === 3">
                <div>
                  <span>可用：</span>
                  <span>{{ scope.row.remainStock }}</span>
                </div>
                <div>
                  <span>占用：</span>
                  <span>{{ scope.row.stockInUse }}</span>
                </div>
              </template>

              <template v-else>
                <div>
                  <span>可用：</span>
                  <el-button type="text" @click="seeStockDetail(scope.row)">{{ scope.row.remainStock }}</el-button>
                </div>
                <div>
                  <span>占用：</span>
                  <el-button type="text" @click="seeStockDetail(scope.row)">{{ scope.row.stockInUse }}</el-button>
                </div>
              </template>
              
            </template>
          </el-table-column>
          <el-table-column width="140px" label="销量">
            <template slot-scope="scope">
              {{scope.row.salesNum}}{{scope.row.unit}}
            </template>
          </el-table-column>
          <el-table-column width="140px" label="序号" prop="sortNo"></el-table-column>
          <el-table-column width="140px" label="状态">
            <template slot-scope="scope">
              <template v-if="scope.row.stock == 0">
                已售空
              </template>
              <template v-else>
                <template v-if="scope.row.goodsStatusRemark">
                  <el-tooltip class="item" effect="dark" :content="scope.row.goodsStatusRemark" placement="top-start">
                    <span style="color: #2d8cf0">{{ dict.upDwonStatusFlag[scope.row.goodsStatus]}}</span>
                  </el-tooltip>
                </template>
                <template v-else>
                  {{ dict.upDwonStatusFlag[scope.row.goodsStatus]}}
                </template>
              </template>
            </template>
          </el-table-column>
          <el-table-column min-width="160px" label="操作" fixed="right" align="right">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="doLinkDetail(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background 
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage" 
          :page-sizes="[10, 20, 50, 100]" 
          :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper" 
          :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 商品库存详情dialog -->
    <el-dialog title="商品库存详情" :visible.sync="openStockDetail" :center="true" top="5vh" width="850px">
      <goods-stock-detail :showFlag="openStockDetail" :goodsObj="selectGoodsObj" @callback="openStockDetail = false">
      </goods-stock-detail>
    </el-dialog>

    <!-- 商品只读详情dialog -->
    <el-dialog title="商品详情" :visible.sync="goodsDetailVisible" top="5vh" width="1200px">
      <goods-read-only-detail :showFlag="goodsDetailVisible" :goodsId="selectGoodsObj.goodsId" @callback="goodsDetailVisible = false">
      </goods-read-only-detail>
    </el-dialog>

  </div>
</template>

<script>
  import {
    getGoodsList,
    listGoodsCategory
  } from '@/api/goods/goods'
  import {
    listBrand
  } from '@/api/user/enterpriseBrand'
  import { getDictByGroupName } from '@/api/common/common'
  import { listSupplier } from '@/api/user/supplier'
  import { getByEnterpriseId } from '@/api/user/enterprise'
  import goodsStockDetail from '@/views/goods/components/goods-stock-detail'
  import goodsReadOnlyDetail from '@/views/goods/components/goods-read-only-detail'
  import elDragDialog from '@/directive/el-dragDialog'

  export default {
    components: {
      goodsStockDetail, goodsReadOnlyDetail
    },
    directives: {
      elDragDialog
    },
    data() {
      return {
        total: 0,
        multipleSelection: [],
        listLoading: true,
        supplierList: [],
        listBrands: [],
        brandId: '',
        supplierType: '',
        searchListQuery: {
          enterpriseId: this.getEnterpriseId(),
          supplierId: '',
          currentPage: 1,
          size: 10,
          distributionType: null,
          supplierType: null,
          liveGoodsType: '',
          selectionGoodsType: '',
          title: '',
          comboType: '1'
        },
        enterpriseConfig: {
          wholesaleAuthority: 0
        },
        supplierId: '',
        textCol: 'title',
        searchKeyword: '',
        dict: {
          upDwonStatusFlag: {}
        },
        isDict: false,
        pagingStatus: '0',
        categoryIds: [],
        categoryCopyIds: [],
        // 快手选择类目
        goodsList: [],
        // 选中商品对象
        selectGoodsObj: '',
        // 商品的所有分类json
        categoryData: [],
        // 商品分类
        goodscategoryIds: [],
        openStockDetail: false,
        goodsDetailVisible: false
      }
    },
    // 初始化页面
    created() {
      const queryParams = this.getCurrentPage().query
      if (queryParams && queryParams.supplierId) {
        this.supplierId = queryParams.supplierId
      }
      if (queryParams && queryParams.currentPage) {
        this.searchListQuery.currentPage = queryParams.currentPage * 1
      }
      this.listBrand()
      this.initEnterpriseConfig()
      this.listSupplier()
      this.initDict()
      this.listGoodsCategory()
      this.initGoodsList()
    },
    methods: {
      listBrand() {
        listBrand(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.listBrands = response.data
        })
      },
      initEnterpriseConfig() {
        getByEnterpriseId(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.enterpriseConfig = response.data
        })
      },
      listSupplier() {
        listSupplier({
          enterpriseId: this.getEnterpriseId()
        }).then(response => {
          if (response.isError) return
          this.supplierList = response.data
        })
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initGoodsList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initGoodsList()
      },
      initDict() {
        getDictByGroupName('ProjectGoodsDTO').then(response => {
          this.dict = response.data
        })
      },
      setSearchListQuery() {
        this.searchListQuery = {
          enterpriseId: this.getEnterpriseId(),
          supplierId: '',
          currentPage: this.searchListQuery.currentPage,
          size: this.searchListQuery.size,
          distributionType: this.searchListQuery.distributionType,
          supplierType: null,
          liveGoodsType: this.searchListQuery.liveGoodsType,
          selectionGoodsType: this.searchListQuery.selectionGoodsType,
          comboType: 1
        }
        this.searchListQuery['supplierId'] = this.supplierId
        this.searchListQuery[this.textCol] = this.searchKeyword
        this.searchListQuery['goodsSource'] = ''
        this.searchListQuery['supplierType'] = ''
        this.searchListQuery['supplierId'] = ''
        if (this.supplierType === '') {
          console.log('')
        } else if (this.supplierType === '1') {
          this.searchListQuery['goodsSource'] = '0'
        } else if (this.supplierType === '2') {
          this.searchListQuery['goodsSource'] = '2'
        } else if (this.supplierType === '3') {
          this.searchListQuery['goodsSource'] = '3'
        } else {
          this.searchListQuery['goodsSource'] = '1'
          this.searchListQuery['supplierId'] = this.supplierType
          this.searchListQuery['supplierType'] = 2
        }
        this.searchListQuery['oneCategoryId'] = ''
        this.searchListQuery['twoCategoryId'] = ''
        this.searchListQuery['threeCategoryId'] = ''
        const categoryIds = this.categoryIds
        if (categoryIds.length === 1) {
          this.searchListQuery['oneCategoryId'] = categoryIds[0]
        }
        if (categoryIds.length === 2) {
          this.searchListQuery['twoCategoryId'] = categoryIds[1]
        }
        if (categoryIds.length === 3) {
          this.searchListQuery['threeCategoryId'] = categoryIds[2]
        }
        this.searchListQuery['pagingStatus'] = this.pagingStatus
      },
      initGoodsList() {
        this.setSearchListQuery()
        this.listLoading = true
        const goodsTypes = [30, 32]
        this.searchListQuery.goodsTypes = goodsTypes.join(',')
        this.searchListQuery.brandId = this.brandId
        this.searchListQuery.crossBorderType = 1
        getGoodsList(this.searchListQuery).then(response => {
          this.total = response.total
          this.goodsList = response.records
          if (!this.isDict) {
            this.dict = response.dict
            this.isDict = true
          }
          this.listLoading = false
        })
      },
      // 获取类目
      listGoodsCategory() {
        const enterpriseId = this.getEnterpriseId()
        listGoodsCategory(enterpriseId).then(response => {
          this.categoryData = response.data
        })
      },
      handleSearch() {
        this.searchListQuery.currentPage = 1
        this.initGoodsList()
      },
      resetSearch() {
        this.searchKeyword = ''
        this.supplierType = ''
        this.categoryIds = []
        this.brandId = ''
        this.searchListQuery = {
          enterpriseId: this.getEnterpriseId(),
          supplierId: '',
          currentPage: 1,
          size: 10,
          distributionType: null,
          goodsSource: '',
          supplierType: '',
          liveGoodsType: '',
          selectionGoodsType: '',
          title: ''
        }
        this.initGoodsList()
      },
      // 商品状态
      goodsStatusClick() {
        this.handleSearch()
      },
      // 查看库存明细
      seeStockDetail(row) {
        this.selectGoodsObj = row
        this.openStockDetail = true
      },
      // 查看详情事件
      doLinkDetail(row) {
        this.selectGoodsObj = row
        this.goodsDetailVisible = true
      }
    }
  }
</script>

<style lang="less" scoped>
  .v-align-h {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }
  .goods-title {
    color: #155bd4;
    line-height: 1.2;
  }
  .special-input {
    /deep/ .el-input {
      width: 150px;
    }
  }
  .anchor-tag {
    color: #008425;
    background-color: #E3FFEB;
    border-color: #0084251a;
  }
</style>
